<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置第一个字的样式 */
        /* p::first-letter{
            font-size: 100px;
        } */

        /* 设置第一行的样式 */
        /* p::first-line{
            font-size: 100px;
        } */

        /* 设置被选择时的样式 */
        /* p::selection{
            color: red;
            background-color: green;
        } */
        div{
            width: 500px;
            height: 200px;
            background-color: hotpink;
        }

        /* before 和after 是跟在内容的前后 */
        /* p “” */
        /* before  再。。。之前 */
        div::before{
            /* before 和after 一定要一个属性  content */
            content: '你好我是before';
            /* 设置的属性只争对content */
            color: red;
            background-color: green;
            /* before和after 生成的元素属于行内元素 设置不了宽高   
            设置不了纵向外边距 */
            /* 可以将它转换为行内块元素 */
            /* before 和 after 设置出来的元素 都属于前面这个标签的子元素 */
            display: inline-block;
            width: 300px;
            height: 200px;
            margin: 100px;
        }

        /* after  在xxx之后 */
        div::after{
            content:'我是after';
        }
    </style>
</head>
<body>
    <!-- <p>asjkdhakj shdkj hdjkahd kjahsdasd asjkdhakj shdkj hdjkahd kjahsdasd asjkdhakj shdkj hdjkahd kjahsdasd asjkdhakj shdkj hdjkahd kjahsdasd asjkdhakj shdkj hdjkahd kjahsdasd asjkdhakj shdkj hdjkahd kjahsdasd asjkdhakj shdkj hdjkahd kjahsdasd asjkdhakj shdkj hdjkahd kjahsdasd asjkdhakj shdkj hdjkahd kjahsdasd asjkdhakj shdkj hdjkahd kjahsdasd </p> -->
    <div>ashdjakshkjhasd</div>
</body>
</html>